<template>
    <span :class="`icon iconfont icon-`+icon" :style="styles"></span>
</template>
<script>
export default {
  props: {
    icon: {
      type: String,
      default: "icon"
    },
    color: String,
    width: String,
    height: String,
    size: String,
  },
  computed:{
      styles(){
          const sty = {}
          if(this.width){
              sty.width = this.width;
          }
          if(this.height){
              sty.height = this.height;
          }
          if(this.size){
              sty['font-size'] = this.size;
          }
          return {
              color:this.color, 
              ...sty,
          }
      }
  }
};
</script>
<style lang="sass">

</style>
